<template>
  <view class="rush">
    <div class="head">
      <div class="state">
        <van-icon name="arrow-left" custom-class="backIcon" @tap="onClickLeft"/>
        <span>抢单专区</span>
      </div>
      <div class="search">
        <van-search custom-class="vansearch" value="搜索优惠券" placeholder="搜索优惠券"/>
      </div>
    </div>

    <div class="pd">
      <!-- 商品卡片 类型2 -->
      <div class="cardList">
        <card2 :isBtn="true" :isYuexiao="false"/>
        <card2 :isBtn="true" :isYuexiao="false"/>
        <card2 :isBtn="true" :isYuexiao="false"/>
        <card2 :isBtn="true" :isYuexiao="false"/>
        <card2 :isBtn="true" :isYuexiao="false"/>
      </div>
    </div>
  </view>
</template>

<script>
import card2 from "@/components/card2/card2.vue";
export default {
  components: { card2 },
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    onClickLeft() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="less">
.rush {
  background: url("")
    no-repeat top rgb(255, 58, 94);
  background-size: 100% auto;
  min-height: 100vh;
}
.head {
  height: 450upx;
  position: relative;
  text-align: center;
  top: 0;
  z-index: 99;
  .state {
    width: 100%;
    display: inline-block;
    padding: 80upx 20upx 0;
    text-align: center;
    position: relative;
    text-align: center;
    span {
      color: #fff;
      font-size: 36upx;
    }
    .backIcon {
      color: #fff !important;
      font-size: 40upx !important;
      vertical-align: middle;
      float: left;
      left: 0;
      padding-left: 20upx;
      bottom: 0;
      padding-top: 17upx;
      padding-right: 10upx;
      position: absolute;
    }
  }
}

.search {
  width: 600upx;
  overflow: hidden;
  display: inline-block;
  margin-top: 25upx;
}
.pd {
  width: 100%;
  display: inline-block;
  padding: 0 20upx;
  box-sizing: border-box;
  .radius {
    border-radius: 20upx;
    background: #fff;
  }
}

.vansearch {
  background: rgba(255, 255, 255, 0.4) !important;
  border-radius: 35upx;
  height: 70upx;
  overflow: hidden;
  .van-search__content {
    background: none;
  }
}

.cardList {
  width: 100%;
  text-align: center;
}
</style>